<script>
import { mapGetters } from 'vuex'

export default {
  name: 'AuthButton',
  props: {
    componentName: {
      type: String,
      default: ''
    },
    authKey: {
      type: String,
      default: ''
    },
    otherAttrs: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      attrs: {}
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    btnAttrs() {
      const { authKey, checkAuth } = this
      return { ...this.otherAttrs, ...this.$attrs, disabled: !checkAuth(authKey) || this.$attrs.isDisabled }
    }
  },
  methods: {
    checkAuth(key) {
      return true // 取消权限点控制
      // const { roleType, rightStr } = this.userInfo
      // const authList = rightStr ? rightStr.split(',') : []

      // if (roleType === 1) return true
      // if (!key) return false
      // if (authList && authList.length) return authList.includes(key)
      // return false
    }
  },
  render(h) {
    const { componentName } = this

    switch (componentName) {
      case 'switch':
        return <el-switch {...{ on: { ...this.$listeners }}} {...{ props: { ...this.btnAttrs }}} />
      case 'upload':
        return (
          <el-upload {...{ on: { ...this.$listeners }}} {...{ props: { ...this.btnAttrs }}}>
            {this.$slots.default}
          </el-upload>
        )
      default:
        return (
          <el-button {...{ on: { ...this.$listeners }}} {...{ props: { ...this.btnAttrs }}} >
            {this.$slots.default}
          </el-button>
        )
    }
  }
}
</script>
